<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>008_轮播图</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #outer {
            width: 520px;
            height: 333px;
            margin: 50px auto;
            padding: 10px 0;
            position: relative;
            background-color: greenyellow;

            /*裁剪溢出的属性*/
            overflow: hidden;
        }
        #imgList {
            list-style: none;
            position: absolute;
            left: 0;
        }
        #imgList li {
            margin: 0 10px;
            float: left;
        }
        #navDiv {
            position: absolute;
            bottom: 15px;
        }
        #navDiv a {
            float: left;
            width: 15px;
            height: 15px;
            background-color: red;
            margin: 0 5px;
            /*设置半透明*/
            opacity: 0.5;
            /*兼容IE8的透明*/
            filter: alpha(opacity=50);
        }
        #navDiv a:hover {
            background-color: black;
        }
    </style>
</head>
<body>

    <!--创建一个大的div，来作为大的容器-->
    <div id="outer">
        <!--创建一个ul，用来放置图片-->
        <ul id="imgList">
            <li><img src="img/01.jpg" alt="轮播图"></li>
            <li><img src="img/02.jpg" alt="轮播图"></li>
            <li><img src="img/03.jpg" alt="轮播图"></li>
            <li><img src="img/04.jpg" alt="轮播图"></li>
            <li><img src="img/05.jpg" alt="轮播图"></li>
            <li><img src="img/01.jpg" alt="轮播图"></li>
        </ul>

        <!--创建图片的导航点-->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
<script type="text/javascript">
    /**
     * 处理imgList的宽度
     */
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");

    // 设置imgList的宽度
    imgList.style.width = 520*imgArr.length+ "px";

    /**
     * 设置导航点居中
     *
     */
    var navDiv = document.getElementById("navDiv");
    var outer = document.getElementById("outer");
    // 设置navDiv的left的值
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

    /**
     * 初始化后显示的是第一张图片，所以需要设置第一个导航点默认选中
     */
    var index = 0; // 默认显示图片的索引
    var allA =document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";

    /**
     * 点击导航点切换图片
     */
    for(var i = 0; i < allA.length; i++) {
        allA[i].num = i;

        allA[i].onclick = function () {
            // 避免用户点击和自动切换效果的冲突，当用户点击的时候关闭定时器
            clearInterval(timer);

            // 获取点击超链接的索引，并将其设置给index
            index = this.num;

            // 切换图片
            // imgList.style.left = -520 * index  + "px";
            setA();

            move(imgList, 'left', -520*index, 20, function () {
                // 用户点击效果执行完毕后，开启自动切换
                autoChange();
            });
        }
    }

    autoChange();

    /**
     * 设置导航点的选中状态
     */
    function setA() {

        // 判断当前索引是否是最后一张图片
        if(index >= imgArr.length - 1) {
            index = 0;
            // 此时显示的是最后一张图片，而最后一张图片和第一张图片一模一样，通过css将最后一张图片切换成第一张
            imgList.style.left = 0;
        }

        // 将所有的a设置为红色
        for (var i = 0; i < allA.length; i++) {
            // 此处设置的为内联样式，优先级要高于css中的样式，如果设置成红色，则css中的鼠标移入效果就没有了，所以此处设置为一个空串
            allA[i].style.backgroundColor = "";
        }

        // 将选中的a设置为黑色
        allA[index].style.backgroundColor = "black";

    }

    /**
     * 创建一个函数，用来开启图片的自动切换
     */

    var timer;
    function autoChange() {
        // 开启一个定时器，用来定时切换图片
        timer = setInterval(function () {
            index++;
            index %= imgArr.length;
            move(imgList, 'left', -520*index, 20, function () {
                // 图片切换完成后，修改导航点
                setA();
            });
        }, 3000);
    }


    /**
     * 执行动画的函数
     * 参数：
     *  obj： 要执行动画的对象
     *  attr: 要执行动画的样式, 比如 top left with
     *  target：执行动画的目标位置
     *  speed：移动的速度
     *  callback: 回调函数，这个函数将会在动画执行完成以后执行
     *
     */
    function move(obj, attr, target, speed, callback) {
        clearInterval(obj.timer);

        // 获取元素目前的位置
        var current = parseInt(getStyle(obj, attr));

        /**
         * 如果从左向右移动 speed 为正值
         * 如果从右向左移动，speed为负值
         */
        if(current > target) {
            speed = -speed;
        }

        /**
         * 向执行动画的对象中添加一个属性，用来保存它自己的定时器标识
         */
        obj.timer = setInterval(function () {
            var oldValue = parseInt(getStyle(obj, attr));

            var newValue = oldValue + speed;

            /**
             *  向左移动时，需要判断newValue是否小于target
             *  向右移动时，需要判断newValue是否大于target
             */
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = target;
            }
            obj.style[attr] = newValue + "px";
            if(newValue == target) {
                clearInterval(obj.timer);

                // 动画执行完毕，调用回调函数
                callback && callback();
            }
        }, 30);
    }

    /**
     * 用来获取指定元素的当前样式
     * @param obj 要获取样式的元素
     * @param name 要获取的样式名
     * @returns {*}
     *
     * ps: 在IE浏览器中如果没有指定样式值，则可能获取到的是auto
     */
    function getStyle(obj, name) {
        if(window.getComputedStyle) {
            return getComputedStyle(obj, null)[name]; // 正常浏览器的方式
        } else {
            return obj.currentStyle[name]; // IE8的方式
        }
    }

</script>
</body>
</html>